<template>
	<view>
		<view class="smart-page-head">
			<view class="smart-page-head-title">textview文本组件</view>
		</view>
		<view class="smart-padding-wrap">
			<text space='ensp' class="text-space">A&nbsp;&emsp;B   C\n</text>
			<text space='emsp' class="text-space">A&nbsp;&emsp;B   C\n</text>
			<text space='nbsp' class="text-space">A&nbsp;&emsp;B   C\n</text>

			<view class="text-box">
				<text selectable="true">{{text}}</text>
			</view>
			<button type="primary" :disabled="!canAdd" @click="add">Add line</button>
			<button type="warn" :disabled="!canRemove" @click="remove">Remove line</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lines: ["这是第1行文字"], 
				maxLines: 10             
			}
		},
		computed: {
		
			text() {
				return this.lines.join('\n')
			},
			
			canAdd() {
				return this.lines.length < this.maxLines
			},
			
			canRemove() {
				return this.lines.length > 1
			}
		},
		methods: {
			
			add() {
				const newLine = `这是第${this.lines.length + 1}行文字`
				this.lines.push(newLine)
			},
		
			remove() {
				if (this.lines.length > 1) {
					this.lines.pop()
				}
			}
		}
	}
</script>

<style>
.smart-page-head {
	display: flex;
	justify-content: center;
	padding: 20rpx 0;       
}


.smart-page-head-title {
	font-size: 45rpx;       
	font-weight: bold;       
	color: #00aa00;         
	
	padding: 0 20rpx;
}
</style>
